<!-- 材料智能体-科学大模型 -->
<template>
  <!-- 顶部搜索区 -->
  <div class="main-app" v-loading="loading">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top: 5px; margin-bottom: 15px;">
      <el-breadcrumb-item :to="{path:'/'}">{{$t('common.nav.home')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('common.nav.materialIntelligentAgent')}}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$t('common.nav.scienceBigModel')}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="box-card">
          <div class="titie-bar"><span>{{$t('common.label.materialChemistry')}}</span></div>
          <el-row :gutter="20">
            <!-- 催化大模型 -->
            <el-col :span="6">
              <div class="func-btn" @click="operation($t('common.label.catalyticLargeModel'))">
                <div><span>{{$t('common.label.catalyticLargeModel')}}</span></div>
                <img src="../../../assets/icon/material_intelligent_agent/scienceBigModel/run.png" />
              </div>
            </el-col>
            <!-- 电池材料 -->
            <el-col :span="6">
              <div class="func-btn" @click="operation($t('common.label.batteryMaterial'))">
                <div><span>{{$t('common.label.batteryMaterial')}}</span></div>
                <img src="../../../assets/icon/material_intelligent_agent/scienceBigModel/run.png" />
              </div>
            </el-col>
            <!-- 化学吸附 -->
            <el-col :span="6">
              <div class="func-btn" @click="operation($t('common.label.chemisorption'))">
                <div><span>{{$t('common.label.chemisorption')}}</span></div>
                <img src="../../../assets/icon/material_intelligent_agent/scienceBigModel/run.png" />
              </div>
            </el-col>
            <!-- 生物材料 -->
            <el-col :span="6">
              <div class="func-btn" @click="operation($t('common.label.biomaterial'))">
                <div><span>{{$t('common.label.biomaterial')}}</span></div>
                <img src="../../../assets/icon/material_intelligent_agent/scienceBigModel/run.png" />
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 1%;">
      <el-col :span="24">
        <el-card shadow="hover" class="box-card">
          <div class="titie-bar"><span>{{$t('common.label.materialPhysics')}}</span></div>
          <el-row :gutter="20">
            <!-- 微波介质 -->
            <el-col :span="6">
              <div class="func-btn" @click="operation($t('common.label.microwaveDielectric'))">
                <div><span>{{$t('common.label.microwaveDielectric')}}</span></div>
                <img src="../../../assets/icon/material_intelligent_agent/scienceBigModel/run.png" />
              </div>
            </el-col>
            <!-- 铁电压电 -->
            <el-col :span="6">
              <div class="func-btn" @click="operation($t('common.label.ferroelectricVoltage'))">
                <div><span>{{$t('common.label.ferroelectricVoltage')}}</span></div>
                <img src="../../../assets/icon/material_intelligent_agent/scienceBigModel/run.png" />
              </div>
            </el-col>
            <!-- 图层材料 -->
            <el-col :span="6">
              <div class="func-btn" @click="operation($t('common.label.layerMaterial'))">
                <div><span>{{$t('common.label.layerMaterial')}}</span></div>
                <img src="../../../assets/icon/material_intelligent_agent/scienceBigModel/run.png" />
              </div>
            </el-col>
            <!-- 人工晶体 -->
            <el-col :span="6">
              <div class="func-btn" @click="operation($t('common.label.intraocularLens'))">
                <div><span>{{$t('common.label.intraocularLens')}}</span></div>
                <img src="../../../assets/icon/material_intelligent_agent/scienceBigModel/run.png" />
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  OperationRecordList
} from "../../../api/record.js";
export default {
  // 页面公共变量
  data() {
    return {

    };
  },
  // 页面创建完成事件
  async created() {
    await this.init();
  },
  // 页面相关方法
  methods: {
    // 初始化加载事件
    async init() {
      this.loading = true;        // 启动加载框

      // // 获取数据
      // const { data, count } = await OperationRecordList({
      //   page: this.currentPage,
      //   limit: this.pageSize,
      //   Name: this.searchParam.name,
      //   Content: this.searchParam.content
      // });

      this.loading = false;       // 关闭加载框
    },
    // 操作功能按钮点击事件
    operation(value, row) {
      switch (value) {
        // ==================== 材料化学 ====================

        // 催化大模型
        case this.$t('common.label.catalyticLargeModel'):
          this.$router.push(`scienceBigModel/model_catalyze`);
          break;
        // 电池材料
        case this.$t('common.label.batteryMaterial'):
          this.$router.push(`scienceBigModel/model_battery_material`);
          break;
        // 化学吸附
        case this.$t('common.label.chemisorption'):
          this.$router.push(`scienceBigModel/model_chemisorption`);
          break;
        // 生物材料
        case this.$t('common.label.biomaterial'):
          this.$router.push(`scienceBigModel/model_biomaterial`);
          break;
        // ==================== 材料物理 ====================

        // 微波介质
        case this.$t('common.label.microwaveDielectric'):
          this.$router.push(`scienceBigModel/model_microwave_dielectric`);
          break;
        // 铁电压电
        case this.$t('common.label.ferroelectricVoltage'):
          this.$router.push(`scienceBigModel/model_ferroelectric_voltage`);
          break;
        // 图层材料
        case this.$t('common.label.layerMaterial'):
          this.$router.push(`scienceBigModel/model_layer_material`);
          break;
        // 人工晶体
        case this.$t('common.label.intraocularLens'):
          this.$router.push(`scienceBigModel/model_intraocular_lens`);
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.titie-bar {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background-color: rgba(61, 171, 175, 1);
  margin-bottom: 1%;
}
.titie-bar span {
  color: #0A0A0A;
  width: 80px;
  font-size: 22px;
  line-height: 32px;
  white-space: nowrap;
  overflow-wrap: break-word;
  margin-left: 15px;
}
.func-btn {
  width: 382px;
  height: 100px;
  box-shadow: 0px 3px 6px 0px rgba(39, 122, 160, 0.09);
  border-radius: 8px;
  background-image: url(../../../assets/icon/material_intelligent_agent/scienceBigModel/btn_bg.png);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;

  div {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(61, 171, 175, 1);
    margin: 45px 0 0 24px;
    display: flex;
    flex-direction: column;

    span {
      color: #0A0A0A;
      font-size: 22px;
      line-height: 14px;
      white-space: nowrap;
      overflow-wrap: break-word;
      margin-left: 20px;
      display: flex;
      flex-direction: column;
    }
  }

  img {
    width: 56px;
    height: 56px;
    margin: 24px 0 0 70%;
  }
}
</style>
